import { h, ref, watch, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { NSpace, NTooltip, NButton, NIcon, NTag, NSwitch } from 'naive-ui'
import { EditOutlined, UserOutlined } from '@vicons/antd'
import {
  COLUMN_WIDTH_CONFIG,
  calculateTableWidth,
  DefaultTableWidth
} from '@/common/column-width-config'
import { Role } from '@/service/modules/user/types'
import { InternalRowData, TableColumns } from '@/common/types'

export function useColumns(onCallback: Function) {
  const t = window.$t

  const columnsRef = ref({
    columns: [] as TableColumns,
    tableWidth: DefaultTableWidth
  })

  const createColumns = () => {
    const columns = [
      {
        title: '#',
        key: 'index',
        align: 'center',
        render: (rowData: InternalRowData, rowIndex: number) => rowIndex + 1,
        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('user.username'),
        key: 'username',
        align: 'center',
        className: 'name',
        ...COLUMN_WIDTH_CONFIG['username']
      },
      {
        title: t('user.nickname'),
        key: 'nickname',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['username']
      },
      {
        title: t('user.mobile'),
        key: 'mobile',
        align: 'center',
        width: 130
      },
      {
        title: t('user.email'),
        key: 'email',
        align: 'center',
        width: 180
      },
      {
        title: t('user.roles'),
        key: 'roles',
        align: 'center',
        width: 140,
        render: (rowData: any, unused: number) =>
          h('div', null, [
            h(
              'span',
              {},
              rowData.roles.map((item: Role) => item.name).join(',')
            ),
            h(
              NTooltip,
              { trigger: 'hover' },
              {
                trigger: () =>
                  h(
                    NButton,
                    {
                      circle: true,
                      type: 'info',
                      size: 'tiny',
                      style: { marginLeft: '5px' },
                      onClick: () => void onCallback({ rowData }, 'modRoles')
                    },
                    () => h(NIcon, null, () => h(EditOutlined))
                  ),
                default: () => t('user.modRoles')
              }
            )
          ])
      },
      {
        title: t('user.department'),
        key: 'department',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['name'],
        render: (rowData: any, unused: number) =>
          h('div', null, [
            h('span', {}, rowData.department),
            h(
              NTooltip,
              { trigger: 'hover' },
              {
                trigger: () =>
                  h(
                    NButton,
                    {
                      circle: true,
                      type: 'info',
                      size: 'tiny',
                      style: { marginLeft: '5px' },
                      onClick: () =>
                        void onCallback({ rowData }, 'modDepartment')
                    },
                    () => h(NIcon, null, () => h(EditOutlined))
                  ),
                default: () => t('user.modDepartment')
              }
            )
          ])
      },
      {
        title: t('user.enabled'),
        key: 'enabled',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['state'],
        render: (rowData: any, unused: number) =>
          h('div', null, [
            h(
              NTag,
              { type: rowData.enabled ? 'success' : 'error', size: 'small' },
              {
                default: () =>
                  t(`user.state_${rowData.enabled ? 'enabled' : 'disabled'}`)
              }
            ),
            h(
              NTooltip,
              { trigger: 'hover' },
              {
                trigger: () =>
                  h(
                    NSwitch,
                    {
                      style: { marginLeft: '5px' },
                      size: 'small',
                      defaultValue: rowData.enabled,
                      onUpdateValue: () =>
                        void onCallback(
                          { rowData },
                          'updateUserState',
                          !rowData.enabled
                        )
                    },
                    []
                  ),
                default: () => t('user.stateSwitch')
              }
            )
          ])
      },
      {
        title: t('user.userDetail'),
        key: 'userDetail',
        align: 'center',
        width: 80,
        render: (rowData: any, unused: number) =>
          h(
            NTooltip,
            {
              trigger: 'hover'
            },
            {
              trigger: () =>
                h(
                  NButton,
                  {
                    circle: true,
                    type: 'warning',
                    size: 'small',
                    onClick: () =>
                      void onCallback({ rowData }, 'showUserDetail')
                  },
                  {
                    icon: () => h(NIcon, null, () => h(UserOutlined))
                  }
                ),
              default: () => t('user.userDetail')
            }
          )
      },
      {
        title: t('common.createTime'),
        key: 'createTime',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('common.updateTime'),
        key: 'updateTime',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('common.operation'),
        key: 'operation',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['operation'](9),
        render: (rowData: any, unused: number) => {
          return h(NSpace, null, {
            default: () => [
              h(
                NButton,
                {
                  onClick: () => void onCallback({ rowData }, 'createUserDb'),
                  quaternary: true,
                  type: 'info',
                  size: 'small'
                },
                t('user.createUserDb')
              ),
              h(
                NButton,
                {
                  onClick: () => void onCallback({ rowData }, 'setUserDbSize'),
                  quaternary: true,
                  type: 'info',
                  size: 'small'
                },
                t('user.setUserDbSize')
              ),
              h(
                NButton,
                {
                  onClick: () => void onCallback({ rowData }, 'resetPwd'),
                  quaternary: true,
                  type: 'info',
                  size: 'small'
                },
                t('user.resetPwd')
              )
            ]
          })
        }
      }
    ] as TableColumns
    columnsRef.value = {
      columns,
      tableWidth: calculateTableWidth(columns)
    }
  }

  onMounted(() => {
    createColumns()
  })

  watch(useI18n().locale, () => {
    createColumns()
  })

  return {
    columnsRef,
    createColumns
  }
}
